<template>
  <div style="position: relative;width: 100%;height: 100%; ">
    <div class="cjy-moldeTitle" style="">
      请加选购物袋
    </div>


    <div style="height:20rem;padding:2.2rem  0 3rem 0 ;width: 100% ;position: relative;overflow: hidden">
      <vertical-scroll :lengths="3" ref="translateMain">
        <div style="width: 100%">
          <ul class="cjy-selectLadderMelue">
            <cart-item-for-out-line v-for="item in showList" :comInfor="item">

            </cart-item-for-out-line>
          </ul>
        </div>

      </vertical-scroll>
    </div>
  </div>


</template>

<script>
  import VerticalScroll from '@/real-components/VerticalScroll'
  import showBox from '@/real-components/CartPullRegular'
  import {translateDetailData} from '@/utils/TranslateDetailDate'
  import CartItemForOutLine from '@/real-components/ActiveItem/CartItemForOutLine'


  export default {
    data() {
      return {
        selseItem: {},
        selseNum: 1,
        activeIndex: -1,
      }
    },
    components: {
      VerticalScroll,
      showBox,
      CartItemForOutLine
    },

    props: {
      bagListDetail: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      initData(data) {

      },
      refresh() {
        this.$nextTick(() => {
          var translateMain = this.$refs.translateMain
          console.log(translateMain)
          setTimeout(() => {
              translateMain && translateMain.refresh()
            }, 50
          )
          console.log('open')
        })
      }
    },
    watch: {
      bagListDetail(data) {
        this.initData(data)
      }
    },
    computed: {
      showList() {
        return this.bagListDetail.filter((item) => {
          return item.wsprice
        })
          .map(item => {
              return translateDetailData(item)
            }
          )
      }
    },

    created() {
      this.initData()
    },


  }
</script>

<style scoped>

  .cjy-moldeTitle {
    text-align: center;
    vertical-align: middle;
    height: 2.2rem;
    line-height: 2.2rem;
    position: absolute;
    width: 100%;
    z-index: 100;
    background: white;
    font-weight: 800;
    font-size: 0.75rem;
  }

  .cjy-selectLadderList {
    height: 2rem;
    line-height: 2rem;
    vertical-align: middle;
    text-align: left;
    padding-left: 0.75rem;
  }

  .cjy-selectLadderMelue {
    background: #eaeaea
  }

</style>
